<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="/media/jquery-1.7.1.min.js"></script>
    <title>Exam</title>

    <script type="text/javascript">

        $(document).ready(function () {

            // set interval for polling time

            $('.answer').change(function () {
               $("#ajax").show();

                var questionId = $(this).attr("name");
                var answerId = $(this).attr("id");
                var userId = $('#uid').text();
                var examId = $('#eid').text();

                console.log(userId);
                console.log(examId);



                $.post("/exams/post_answer", {
                            uid : userId,
                            eid : examId,
                            qid : questionId,
                            aid : answerId
                        },
                        function(data) {
                            $("#ajax").hide();
                        }
                );


            });


            $(document).ajaxSend(function(event, xhr, settings) {
                function getCookie(name) {
                    var cookieValue = null;
                    if (document.cookie && document.cookie != '') {
                        var cookies = document.cookie.split(';');
                        for (var i = 0; i < cookies.length; i++) {
                            var cookie = jQuery.trim(cookies[i]);
                            // Does this cookie string begin with the name we want?
                            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                                break;
                            }
                        }
                    }
                    return cookieValue;
                }
                function sameOrigin(url) {
                    // url could be relative or scheme relative or absolute
                    var host = document.location.host; // host + port
                    var protocol = document.location.protocol;
                    var sr_origin = '//' + host;
                    var origin = protocol + sr_origin;
                    // Allow absolute or scheme relative URLs to same origin
                    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
                            (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
                        // or any other URL that isn't scheme relative or absolute i.e relative.
                            !(/^(\/\/|http:|https:).*/.test(url));
                }
                function safeMethod(method) {
                    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
                }

                if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
                    xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
                }
            });

        });

    </script>

</head>

<body>

<div id="wrap">
    <div id="exam-header">
        <h1 id="title">{{ exam_result.dept.dept_description  }}</h1>
        <ul>
            <li>Description : {{ exam_result.remarks }}</li>
            <li>Type : {{ exam_result.type.type_description }}</li>
            <li>Course : {{ exam_result.course }}</li>
            <br/>
        </ul>
        <p>Time to complete the exam :{{ exam_time }} hour(s)</p>
    </div>
    <form id="questions" method="POST" action="/exams/submit/{{ user_id }}/{{ exam_id }}">
        {% for q in exam_result.question_set.all %}
            <h1>{{ q.question }}</h1>
            {% for a in q.answer_set.get_query_set %}
                <span><input type="radio" class="answer" name="{{ q.id }}" id="{{ a.id }}">{{ a.answer }}</span>
            {% endfor %}
        {% endfor %}
        <br/>
        <input type="submit" id="submit" value="Submit">
    </form>
    <br/>


</div>

<div style="visibility: hidden;" id="ajax">Calling...</div>
<div id="info" style="visibility: hidden;">
    <p id="uid">{{ user_id }}</p>
    <p id="eid">{{ exam_id }}</p>
</div>
</body>
</html>